<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    body {
        padding-top: 60px;
        /* 60px to make the container go all the way to the bottom of the topbar */
    }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
</head>

<body>

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="brand" href="#">Project name</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li class="active"><a href="#">Home</a>
                        </li>
                        <li><a href="#about">About</a>
                        </li>
                        <li><a href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>

    <div class="container">

        <div class="row-fluid">
            <div id="map_canvas" class="span10 offset1 well" style="height:500px;">
                <svg height="480" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.5px;">
                    <g>
                        <!--主线部分-->
                        <path class="mainLine" fill="none" stroke="#cc0000" d="M10,0L10,500" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
                        <!-- 節點1-->
                        <circle class="mainLinePoint" cx="10" cy="440" r="5" stroke="#fff" stroke-width="2" fill="#cc0000"></circle>
                        <path class="textArrow" fill="#7F8C8D" stroke="none" stroke-width="2" d="M20,440L28,435L28,445Z"></path>
                        <rect class="textWrap" width="150" height="50" x="29" y="415" r="0" rx="0" ry="0" fill="none" stroke="#7F8C8D"></rect>


                        <!-- 節點2-->
                        <!-- 
                        <path class="subLine" fill="none" stroke="#00cc8e" stroke-width="2" d="M10,390L100,380L100,355L200,355L195,353L195,357L200,355"></path>
                        <circle class="subLinePoint" cx="100" cy="380" r="5" stroke="#fff" stroke-width="2" fill="#00cc8e"></circle>
                        <circle class="subLinePoint" cx="100" cy="355" r="5" stroke="#fff" stroke-width="2" fill="#00cc8e"></circle>
                        -->
                        <path class="subLine" fill="none" stroke="#00cc8e" stroke-width="2" d="M10,390L200,390L195,388L195,392L200,390"></path>
                        <circle class="mainLinePoint" cx="10" cy="390" r="5" stroke="#fff" stroke-width="2" fill="#cc0000"></circle>

                        <path class="textArrow" fill="#7F8C8D" stroke="none" stroke-width="2" d="M210,390L218,385L218,395Z"></path>
                        <rect class="textWrap" width="150" height="50" x="219" y="365" r="0" rx="0" ry="0" fill="none" stroke="#7F8C8D"></rect>

                        <!-- 節點3-->
                        <circle class="mainLinePoint" cx="10" cy="340" r="5" stroke="#fff" stroke-width="2" fill="#cc0000"></circle>

                        <path class="textArrow" fill="#7F8C8D" stroke="none" stroke-width="2" d="M20,340L28,335L28,345Z"></path>
                        <rect class="textWrap" width="150" height="50" x="29" y="315" r="0" rx="0" ry="0" fill="none" stroke="#7F8C8D"></rect>
                    </g>
                </svg>

            </div>
        </div>

    </div>
    <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="jquery-1.8.3.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="http://api.map.baidu.com/api?v=1.5&ak=6d65c2ff238cb812f003e12b320ba088" type="text/javascript"></script>
</body>

</html>
